<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Maqetta Preview 4 Release Notes</title>
</head>

<body class="maqettadocs">
<!-- Header -->
<!--
<iframe src ="header.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->
<div id="pagebody">

<style type="text/css">
.majortopic { font-size:105%; font-weight:bold; color:#a0a; }
.minortopic { font-weight:bold; }
</style>

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
    <a href="releasenotes/preview3.html">Previous</a> / <a href="releasenotes/preview5.html">Next</a>
    </td></tr>
</table>


<h1>Maqetta Preview 4</h1>

<h2>Preview 4 release notes</h2>

<p>The Preview 4 release includes the following updates:</p>

<ul style="margin-top: 0pt;" type="disc">
	<li><p><span class='majortopic'>Mobile theme editor</span> -  
		The Preview 4 release includes a mobile theme editor feature that
		allows users to create custom CSS themes.</p>
		<p>The documentation includes
		a new <em>mobile theme editor tutorial</em>. You can find the list of tutorials by 
		invoking the <strong>Help &gt; Tutorials</strong> command from the main menubar.</p>
		<p>The mobile theme editor allows:</p>
		<ul>
			<li><span class='minortopic'>Page-level styling</span> -
				At the top of the mobile theme editor, there is a "page backgrounds and fonts" section
				that allows the user to customize CSS background properties for mobile "pages"
				(a.k.a., screens or views).
				Backgrounds can include CSS3 gradients (see below).</li>
			<li><span class='minortopic'>Global cross-widget styling</span> -
				At the top of the mobile theme editor, there are two global widget sections,
				one that controls the background and font styling for two groups of
				widgets. The first group includes Headings and TabBar widgets.
				The second group include various mobile button widgets.
				The global widget options provides users with a quick way to simultaneously
				change background and font styling across multiple widgets.
				Backgrounds can include CSS3 gradients (see below).</li>
			<li><span class='minortopic'>Widget-specific styling</span> -
				At the bottom of the mobile theme, you can choose particular widgets
				and then customize CSS properties for each particular widget.
				The widget-specific styling options are extensive. You can customize
				styling for different interactive states and (for widgets with some visual complexity),
				you can customize the styling of different parts of a particular widget.</li>
		</ul>
		The mobile theme editor can be launched in two ways:
		<ul>
			<li><span class='minortopic'>New-&gt;Theme...</span> - The <strong>New Theme...</strong> command is on the
			<strong>New</strong> menu on the top menubar. With this command, you can clone
			one of the built-in themes or one of your own custom themes to create a new theme.
			Immediately after creating a new mobile theme, the mobile theme editor opens to allow
			you to customize the visual styling of your custom theme.</li>
			<li><span class='minortopic'>Open-&gt;Theme...</span> - The <strong>Open Theme...</strong> allows
			you to open the mobile theme editor on one of your existing custom themes.</li>
		</ul>
		You have the choice of creating a single custom theme that works across multiple different target
		mobile devices, creating different custom themes for different mobile devices, or any
		combination of cross-device themes that you need. Here are some common workflows:
		<ul>
			<li><span class='minortopic'>One theme that applies to all mobile devices</span> - For this result,
				typically you would issue a <strong>New Theme...</strong> command to
				clone the dojox.mobile "custom" theme and then (on the <strong>Select theme...</strong> dialog)
				apply that theme to all mobile devices.</li>
			<li><span class='minortopic'>Tweaking the built-in device-specific themes</span> - Some users
				want their UI to look "native" and therefore (for the most part) use the same
				visual styling as the native platform's own applications, but often there are minor
				CSS tweaks that users want to make to the styling for particular widgets. 
				For this result, you should clone each of the built-in device-specific themes
				("android", "blackberry", "iphone", "ipad") into a custom theme
				(e.g., "myandroid", "myblackberry", etc.) and then use the mobile theme editor
				to adjust styling on these custom themes. In the <strong>Select theme...</strong> dialog,
				you should use "(device-specific)" mobile styling and then choose your custom
				theme for each particular device.</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>Mobile visual page editor improvements</span> - 
		The Preview 4 release includes dozens of enhancements and bug fixes to the mobile visual page
		editor. Here are some highlights:</p>
		<ul>
			<li><span class='minortopic'>Support for mobile headers and footers (the 'fixed' property on ScrollableView)</span> -
				Preview 4 includes intelligence within the mobile visual page editor for the
				'fixed' property on the ScrollableView container widget. The 'fixed' property
				(available on Headings and TabBars)
				can be set to 'top' (provides a fixed header on the page or screen) or 'bottom'
				(provides a fixed footer on the page or screen). Both at authoring time and at runtime
				in the browser, any fixed Headings or TabBars will stay glued to the top or bottom
				of the current page view as the rest of the page scrolls.</li>
			<li><span class='minortopic'>Arbitrary HTML content for ListItems</span> -
				In Preview 3, the interior content for ListItems could only be simple text strings.
				With Preview 4, the interior content for ListItems can consist of either simple
				text strings or arbitrary rich HTML content. This new flexibility allows
				ListItem content to contain multi-line text, styled text (e.g., bold, italic)
				and &lt;img&gt; elements (e.g., to reference a small icon image or even SVG vector graphics).
				To include arbitrary HTML content within a ListItem, simply type markup (e.g., &lt;i&gt;italic text&lt;/i&gt;) into the 
				data entry popup that appears when double-clicking on a mobile list widget.
				This will cause 2 radio buttons to appear where you can tell Maqetta whether
				to treat the content as plain text or rich HTML markup.</li>
			<li><span class='minortopic'>Improved data popup for mobile lists</span> -
				Preview 3 had inconsistencies in the user interface for editing the content of mobile list widgets.
				With Preview 4, the UI approaches have been consolidated. Double-clicking on a ListItem widget
				now brings up a data popup that allows editing all of the ListItems in that list simultaneously.</li>
			<li><span class='minortopic'>Silhouette offset bug fix (when running Maqetta with recent versions of Chrome)</span> -
				Between Preview 3 and Preview 4, a new release of the Google Chrome browser
				exposed a bug within Maqetta's logic for its placement of the mobile device silhouettes,
				which causes the mobile device content to be shifted several pixels up and to the left
				of proper placement. With Preview 4, this bug has been fixed.</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>Quick UI sketching (both high-fidelity and low-fidelity)</span> - 
		The Preview 4 release includes major enhancements and countless minor bug fixes in the general area
		of "quick UI sketching" where users can place widgets, raster graphics and vector graphics
		onto the page canvas at absolute positions, similar to how simple drawing and illustration software works. 
		This mode allows users to quickly sketch out UI proposals, avoiding some of the layout complexities with CSS flow layout. </p>
		<p>In this mode, Maqetta provides simple drawing tool
		functionality. Sketching can be done either using a <span class='minortopic'>high fidelity</span> CSS theme ("high fidelity" means
		the exact same visual styling that you would have in your final production application) or
		a <span class='minortopic'>low fidelity</span> CSS theme ("low fidelity" means the widgets are rendered with a pseudo hand-drawn
		look and feel in black and white).</p>
		<p>The documentation includes
		a new <em>quick UI sketching tutorial</em>. You can find the list of tutorials by 
		invoking the <strong>Help &gt; Tutorials</strong> command from the main menubar.</p>
		<p>Among the highlights in this area:</p>
		<ul>
			<li><span class='minortopic'>Ability to go into sketch mode at page creation time</span> -
				Preview 4 includes a revamped <strong>New HTML File...</strong> dialog (see below for more)
				that includes a "Composition type" option that allows you to pick a quick sketch option:
				<ul>
					<li><span class='minortopic'>Desktop hi-fi sketch</span> -
						With this option, the new HTML page starts up in sketch mode
						(i.e., absolute positioning) using a high-fidelity CSS theme (e.g., the claro theme).</li>
					<li><span class='minortopic'>Desktop lo-fi sketch</span> -
						With this option, the new HTML page starts up in sketch mode
						(i.e., absolute positioning) using a low-fidelity CSS theme (e.g., the sketch theme)
						which renders the widgets using a pseudo hand-drawn, black-and-white look and feel.</li>
				</ul>
			</li>
			<li><div><span class='minortopic'>A collection of common UI clipart</span> -
				Preview 4 includes a collection of roughly 40 scalable icons and other graphics
				for common visual elements within a user interface, ranging from
				various icons designed to look good at 16x16 (e.g., close icon, RSS feed icon, print icon)
				to a handful of larger-size graphic placeholders such as a sample street map.
				The 40 clipart items appear in the Maqetta Widgets palette in a new Clip Art section.
				The clipart items are all vector graphics (SVG) and can be resized without
				visual loss of quality.</div>
				<div class='note'>Note that you can add your own custom raster or vector clipart by
				simply uploading your images to your Maqetta workspace and then dragging/dropping
				the uploaded images from the Files palette onto the canvas.
				Your custom images can be either rasters (e.g., *.png, *.jpg, *.gif) or
				vectors (i.e., *.svg).</note>
			</li>
			<li><span class='minortopic'>Simple drawing tools</span> -
				For situations where you can't find a widget or clipart that represents
				the UI control that you want to include in your application's UI,
				Maqetta Preview 4 offers some simple drawing tools for common shapes:
				rectangles, rounded rectangles, circles/ellipses, lines (horizontal, vertical, arbitrary orientation),
				lines with arrows and point text. With the actual HTML page content, each of these shapes is
				a shape widget that under the hood is rendered as SVG.
				There is a new section of the Properties palette labelled "Graphics and SVG" where
				you can control SVG-specific styling properties for the shape widgets: 'fill',
				'stroke' and ''stroke-width'.
			</li>
			<li><span class='minortopic'>Better default sizes for container widgets in sketch mode</span> -
				Preview 4 sets better initial sizes for Dojo container widgets
				(BorderContainer, TabContainer, Accordion, etc.) when sketching out a UI
				using absolute positioning (which is what you get when opening a New HTML File
				with either Desktop hi-fi sketch of Desktop lo-fi sketch).
				Previously, these widgets would default to 100% for both flow and absolute layout.
				Now, these widgets default to 100% only in particular flow layout scenarois and default to (roughly) 300px for absolute layouts.</li>
			<li><span class='minortopic'>Drag out widget size at widget creation time</span> -
				Preview 4 now allows you to click a widget in the Widgets palette
				and then drag out a rectangle on the canvas for the initial size and position (when using absolute layout)
				for the widget. (Note that some widgets are not resizable.)</li>
			<li><span class='minortopic'>Improvements to snapping</span> -
				Preview 4 includes various enhancements and fixes to the dynamic snapping
				feature, including the ability to snap any edge to any edge (e.g., right edge
				of one widget to the left edge of another widget).</li>
			<li><span class='minortopic'>Shift key for constrained move and resize</span> -
				For any widgets, HTML elements (e.g., images), clipart or shapes, Preview 4 now
				allows the shift key to turn on "constrained mode". When moving a widget using
				the mouse, holding down the shift key will constrain movement to horizontal or
				vertical. When resizing a widget, the shift key will either preserve aspect ratio
				(for images and clipart) or force square size (w=h).</li>
			<li><span class='minortopic'>Arrow key fixes - now move widgets by 1px</span> -
				Preview 4 includes multiple fixes when using the keyboard arrow keys
				to move widgets. In particular, arrow keys now move the selected widget(s)
				by 1px. If you are holding down the shift key, the widgets will move by 10px.</li>
			<li><span class='minortopic'>Choose Parent UI while dragging (and reparenting)</span> -
				Preview 4 includes a preference (Settings-&gt;Preferences-&gt;HTML-&gt;Visual Editor-&gt;"When dragging, show possible parents") 
				that allows you to turn on supplemental
				user interface for drag operations that shows you, for the widget being dragged,
				which container widget will become the parent widget, and what other candidate
				parent widgets are also at the current mouse location. While dragging, you can
				press number keys from the keyboard (1, 2, etc) to tell Maqetta to choose a different parent.
				The Choose Parent user interface is operational when dragging a widget from the Widgets palette
				to the canvas and when dragging an existing widget around on the canvas.
				If the preference is off, you can still toggle on the Choose Parent user interface
				by holding down the shift key while dragging.</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>New HTML File dialog improvements</span> - 
		The Preview 4 release has a revamped New HTML File dialog (i.e., the dialog that appears
		when you issue a <strong>New-&gt;HTML File...</strong> command.</p>
		<ul>
			<li><span class='minortopic'>Choose "Composition type" at page creation time</span> -
				With Preview 4, you can decide at page creation time what type of composition
				you want to create. Maqetta will then set various page editing options
				so that it will be easy for you to accomplish a particular task (e.g., quick UI sketch,
				detailed design of the HTML/CSS final application, mobile UI creation, etc.).
				With Preview 4, the following composition types are available:
				<ul>
					<li><span class='minortopic'>Desktop hi-fi page</span> -
						This is when you are defining the detailed UI for a desktop web application
						and/or detailed UI for a piece of user interface (e.g., a dialog).
						The new HTML page will be for desktop browsers (i.e., no mobile device silhouette),
						using a high-fidelity CSS theme suitable for final product delivery such as claro,
						and will open using flow layout.
						(This was the default mode in previous releases.)</li>
					<li><span class='minortopic'>Desktop hi-fi sketch</span> -
						This is when you want to quickly sketch out the proposed UI for a desktop web application
						and/or quick sketching of a piece of user interface (e.g., a dialog).
						With this option, you will be start off in absolute positioning mode ("sketch mode")
						which allows drawing out a user interface as if in a simple drawing tool application.
						(See notes above about Quick UI Sketching).
						Like the previous option, the new HTML page will be for desktop browsers 
						(i.e., no mobile device silhouette),
						using a high-fidelity CSS theme suitable for final product delivery such as claro.</li>
					<li><span class='minortopic'>Desktop lo-fi page</span> -
						Same as "Desktop hi-fi page" except the page will be initialized using
						the "sketch" theme which provides a pseudo hand-drawn look and feel where
						most widgets are rendered in black-and-white with thick strokes on the widget outlines.
						Low fidelity mode is sometimes useful in early wireframing scenarios.</li>
					<li><span class='minortopic'>Desktop lo-fi sketch</span> -
						Same as "Desktop hi-fi sketch" (i.e., suitable for quick UI sketching) 
						except the page will be initialized using
						the "sketch" theme (see "Desktop lo-fi page").</li>
					<li><span class='minortopic'>Particular mobile device (iPhone, iPad, Android, etc.)</span> -
						The other available composition types represent specific mobile devices.
						If you are creating a mobile UI, you usually will want to choose one of these devices.
						Note that you can always switch devices within the page editor - the device you choose
						here is just the initial device when the page editor opens. In the Preview 4 release,
						mobile UI authoring is constrained to flow layout and high fidelity CSS themes, only.</li>
				</ul>
			</li>
			<li><span class='minortopic'>Collapse/expand file listing</span> -
				With Preview 4, the New HTML File dialog hides the file list control by default.
				You can open the file list control by clicking on the right-pointing arrow
				to the right of the "Where" control.</li>
			<li><span class='minortopic'>New Folder... button</span> -
				You can now create new folders in the New HTML File dialog by opening up the file listing
				(see previous bullet) and then clicking on the New Folder button.</li>
			<li><span class='minortopic'>Theme... button</span> -
				In the lower-left corner of the New HTML File dialog, there is a "Theme..." button
				which allows you to choose the initial CSS theme(s) that you want to use
				in your HTML page.</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>CSS3 gradients and Background dialog</span> - 
		Preview 4 adds a Background dialog that is available by clicking on any of the "..." buttons
		in the Background section of the Properties palette. The Background dialog provides
		improved UI for existing background styling features (e.g., ability to preview background image options),
		but more importantly now allows creation and editing of CSS3 gradients.
		Both linear and radial gradients are supported and can have any number of gradient stops.
		Maqetta includes advanced logic that allows it to import various browser-specific CSS3 gradient syntaxes
		including the original WebKit/Apple gradient syntax (now deprecated but still supported in WebKit)
		and generates multiple 'background-image' property declarations so that the generated gradients will work correctly
		across different browsers (WebKit, Mozilla, IE and Opera). (This feature is similar to the CSS3 gradient
		generator tools available on the Web today.)</p>
	</li>
	<li><p><span class='majortopic'>Theme sets</span> - 
		Preview 4 adds a <strong>Theme sets...</strong> dialog (available from top menubar at Settings-&gt;Theme sets...)
		that allows you to organize your various CSS themes into "theme sets", which represent a collection
		of related themes. This feature is mostly for advanced mobile authoring scenarios where authors
		are experimenting with different CSS styling approaches.</p>
	</li>
	<li><p><span class='majortopic'>Dojo 1.7 GA support</span> - 
		Whereas Preview 3 supported a beta release of Dojo 1.7, Preview 4 supports the final Dojo 1.7 GA release.</p>
	</li>
	<li><p><span class='majortopic'>Progress on transition to AMD loader</span> - 
		With Preview 4, we are about 50% complete with transitioning all aspects of Maqetta
		from the old-style Dojo loader (dojo.provide, dojo.require) to the new AMD loader.
		We hope to finish this transition with our next milestone release.
		Once that transition is complete, various key performance issues with Preview 4 (and earlier releases)
		will improve.</p>
	</li>
	<li><p><span class='majortopic'>Progress on security issues</span> - 
		With Preview 4, we have started to address security issues within the 
		Maqetta server and client-side logic. We will continue to address security issues
		in upcoming releases.</p>
	</li>
	<li><p><span class='majortopic'>Many other bug fixes</span> - 
		Preview 4 includes over 280 miscellaneous bug fixes. Some of those fixes
		can be seen by going to 
		<a href="https://github.com/maqetta/maqetta/issues?sort=created&direction=desc&state=closed&page=1&milestone=10" target="_blank">
		this URL which lists bugs closed against the Preview 4 release</a>.
	</li>
</ul>

<p> </p>

<p class="prevnext">
    <a href="releasenotes/preview3.html">Previous</a> / <a href="releasenotes/preview5.html">Next</a>
</p>

</div>  <!-- pagebody -->

<!-- Footer -->
<!--
<iframe src ="footer.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->

</body>
</html>